<!DOCTYPE HTML>
<html>
<head>
<title>choice</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }
        /*1.进入到分院详情时，需要查询分院所在位置，
         然后将分院位置填入函数中，其他信息获取到也应该存到弹出
         框中*/
        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style> -->
<script type="application/x-javascript">
	
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		
</script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
<script type="text/javascript" src="js/easing.js"></script>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"
	media="screen" />
<link href="css/megamenu.css" rel="stylesheet" type="text/css"
	media="all" />
<script src="js/menu_jquery.js"></script>
<script type="text/javascript" src="js/megamenu.js"></script>
<script>
	$(document).ready(function() {
		$(".megamenu").megamenu();
	});
</script>
<link rel="stylesheet" href="css/etalage.css">
<script src="js/jquery.easydropdown.js"></script>
<script src="js/jquery.etalage.min.js"></script>
<script>
	jQuery(document)
			.ready(
					function($) {

						$('#etalage')
								.etalage(
										{
											thumb_image_width : 300,
											thumb_image_height : 400,
											source_image_width : 900,
											source_image_height : 1200,
											show_hint : true,
											click_callback : function(
													image_anchor, instance_id) {
												alert('Callback example:\nYou clicked on an image with the anchor: "'
														+ image_anchor
														+ '"\n(in Etalage instance: "'
														+ instance_id + '")');
											}
										});

					});
</script>

<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">
	$(function() {
		$('.scroll-pane').jScrollPane();
	});
</script>

<script type="text/javascript">
	$(function() {
		getParam();
		showAllMovie();
		showRoundDate();
		getUser();
	});
	function getUser() {
		$.ajax({
			url:"user/getUser",
			type:"get",
			success:function(data){
				if(data!=""){
					$("#userLogin").css("display","none");
					$("#userMessage").css("display","block");
					var content = '<a href="info.html">'
						+'<img alt="" src="'+data.uimg+'" height="40px" style="border-radius: 50%;">&nbsp'
						+'<span style="color:black;" id="uname">'+data.uname+'</span>&nbsp&nbsp'
						+'</a>'
						+'<button type="button" class="btn btn-info" onclick="logout()" style="">注销</button>';
					$("#userMessage").html(content);
				}else{
					$("#userLogin").css("display","block");
					$("#userMessage").css("display","none");
				}
			}
		});
	}
	function logout(){
		$.ajax({
			url:"user/logout",
			type:"get",
			success:function(data){
				getUser();
			}
		});
	}
	function showRoundDate(){
		var mid = $("#mid").val();
		var yid = $("#yid").val();
		$.ajax({
			url:"round/showRoundDate",
			type:"post",
			data:{
				mid:mid,
				yid:yid
			},
			success:function(data){
				var content = "";
				for(var i=0;i<data.length;i++){
					content+='<button type="button" class="btn btn-danger" onclick="showRound(\''+data[i].roundDate+'\')">'+data[i].roundMonth+'</button>&nbsp';
				}
				$("#roundDate").html(content);
				if(data==""){
					$("#roundDate").html("该电影暂时没有排片，敬请期待~");
					showRound("0000年00月00日");
				}else{
					showRound(data[0].roundDate);
				}
			}
		});
	}
	function showRound(date){
		var mid = $("#mid").val();
		var yid = $("#yid").val();
		$.ajax({
			url:"round/showRound",
			type:"post",
			data:{
				mid:mid,
				yid:yid,
				start:date
			},
			success:function(data){
				var content = "";
				if(data!=""){
					for(var i = 0;i<data.length;i++){
						content+='<tr>'
						+'<td>'+data[i].time+'</td>'
						+'<td>'+data[i].leaveTime+'</td>'
						+'<td>'+data[i].language+'</td>'
						+'<td>'+data[i].ytname+'</td>'
						+'<td>'+data[i].pprice+'</td>'
						+'<td>'
						+'<form action="/cseat/'+data[i].id+'" method="get">'
						+'<button type="submit" class="btn btn-danger">选座购票</button>'
						+'</form>'
						+'</td>'
						+'</tr>';
					}
				}else{
					content+='<tr>'
						+'<td colspan="5">该电影暂时没有排片，敬请期待~</td>'
						+'</tr>';
				}
					$("#tbody").html(content);
			}
		});
	}
	function showAllMovie(){
		$.ajax({
			url:"movie/showTenMovie",
			type:"get",
			success:function(data){
				for(var i=0;i<data.length;i++){
					var content='<img src="'+data[i].movieImgs[0].mimg+'" class="img-responsive" alt="" onclick="showMovieById('+data[i].id+')">'
					+'<div class="biseller-name">'
					+'<h4>'+data[i].mname+'</h4>'
					+'</div>';
					$("#"+i).html(content);
				}
			}
		});
	};
	function getParam() {
		var url = location.search; //获取url中"?"符后的字串
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			var mid = decodeURIComponent(strs[0].replace("mid=", ""));
			var yid = decodeURIComponent(strs[1].replace("yid=", ""));
			$("#mid").val(mid);
			$("#yid").val(yid);
			showMovieById(mid);
			showCinemaById(yid);
			showMap(yid)
		}
	}
	function showMovieById(mid){
		$("#mid").val(mid);
		$.ajax({
			url:"movie/showMovieById",
			type:"post",
			data:{
				id:mid
			},
			success:function(data){
				$("#movieName").html(data.mname);
				$("#movieImg").prop("src",data.movieImgs[0].mimg);
				$("#movieDir").html(data.director);
				$("#movieStar").html(data.mstar);
				$("#movieType").html(data.mtype);
				$("#movieLoc").html(data.location);
				$("#movieLen").html(data.mlength);
				$("#movieText").html(data.mmassage);
				showRoundDate();
			}
		});
	}
	function showCinemaById(yid){
		$.ajax({
			url:"cinema/showCinemaById",
			type:"post",
			data:{
				yid:yid
			},
			success:function(data){
				$("#yimg").prop("src",data.yimg);
				$("#yname").html(data.yname);
				$("#yaddress").html(data.yaddress);
				$("#yphone").html(data.yphone);
				$("#ytext").html(data.ytext);
			}
		});
	}
</script>
</head>
<body>
	<input type="hidden" id="mid">
	<input type="hidden" id="yid">
	<!-- header -->
	<div style="height: 100px;">
		<div style="position: fixed;width: 100%;z-index: 999;">
		<div class="header">
			<div class="top_bg" style="background-color: white;">
				<div class="container">
					<div class="header_top">
						<div class="logo">
							<a href="index.html"><img src="images/logo.png" alt="" />蜗牛影院</a>
						</div>
						<div class="top_right" style="margin-top: 0">
							<div id="userMessage" style="line-height: 45px;display: none;">
								<!-- <a href="info.html"><img alt="" src="images/aimg.jpg" height="40px" style="border-radius: 50%;" id="uimg">&nbsp<span style="color:black;" id="uname">1823342352323</span></a> -->
							</div>
							<ul id="userLogin" style="line-height: 45px;display: none;">
								<li><a href="registration.html"><button type="button" class="btn btn-info">注册</button></a></li>|
								<li class="login">
									<div id="loginContainer"><a href="#" id="loginButton"><button type="button" class="btn btn-info">登陆</button></a>
										<div id="loginBox">
											<form id="loginForm">
												<fieldset id="body">
													<fieldset>
														<label for="email">账号</label>
														<input type="text" name="email" id="email">
													</fieldset>
													<fieldset>
														<label for="password">密码</label>
														<input type="password" name="password" id="password">
													</fieldset>
													<input type="submit" id="login" value="登陆">
													<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
												</fieldset>
												<span><a href="#">密码忘记了?</a></span>
											</form>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		</div>
		<div class="head-bann">
			<div class="container">
				<div class="head-nav">
					<span class="menu"> </span>
					<ul class="megamenu skyblue">
						<li><a class="color1" href="index.html">首页</a></li>
						<li class="grid"><a class="color2" href="movies.html">影片</a></li>
						<li><a class="color4" href="cinema.html?mid=1">影院</a></li>
						<li><a class="color5" href="comment.html">评论</a></li>
						<div class="clearfix"> </div>
					</ul>
				</div>
			</div>
		</div>
		</div>
		</div>
	<!-- script-for-nav -->
	<script>
		$("span.menu").click(function() {
			$(".head-nav ul").slideToggle(300, function() {
				// Animation complete.
			});
		});
	</script>
	<!-- script-for-nav -->

	<div class="banner" style="background-image: url(images/banner1.jpg);">
		<div class="container" style="border-bottom: darkgray 1px solid;">
			<br />
			<br />
			<h4 style="color: white;" id="yname">XX影院</h4>
		</div>
		<div class="container">
			<div class="col-md-4">
				<img src="images/ylf.jpg" width="80%" style="margin-top: 1em;" id="yimg"/>
			</div>
			<div class="col-md-4" style="margin-top: 1em;">
				<div style="color: white;">
					详细地址：
					<p style="color: white;" id="yaddress">成华区建设南支路4号</p>
				</div>
				<div style="color: white;">
					联系电话：
					<p style="color: white;" id="yphone">028-84773773</p>
				</div>
			</div>
			<div class="col-md-4" style="margin-top: 1em;">
				<div id="container" style="height: 250px;width: 250px;"></div>
			<div class="clearfix"></div>
		</div>
	</div>
		<div class="container"
			style="margin-top: 1em;">
			<div style="color: white;">
				影院服务：
				<p style="color: white;" id="ytext">028-84773773</p>
			</div>
		</div>
	</div>
	<!-- header -->
	<!-- content -->
	<div class="container">
		<div class="container" style="border-bottom: darkgray 1px solid;">
			<br />
			<h4>选座购票</h4>
		</div>
		<div>
			<div class="best-seller">

				<div class="biseller-info" style="border-bottom: darkgray 1px solid;">
					<ul id="flexiselDemo1">
						<li>
							<div class="biseller-column1" id="0">
								<!-- <img src="images/ss6.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>狮子王</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="1">
								<!-- <img src="images/ss4.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>烈火英雄</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="2">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="3">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="4">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="5">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="6">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="7">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="8">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>
						<li>
							<div class="biseller-column1" id="9">
								<!-- <img src="images/ss5.jpg" class="img-responsive" alt="">
								<div class="biseller-name">
									<h4>速度与激情：特别行动</h4>
								</div> -->
							</div>
						</li>

					</ul>
				</div>

			</div>
			<script type="text/javascript">
				$(function() {
					$("#flexiselDemo1").flexisel({
						visibleItems : 5,
						animationSpeed : 1000,
						autoPlay : true,
						autoPlaySpeed : 3000,
						pauseOnHover : true,
						enableResponsiveBreakpoints : true,
						responsiveBreakpoints : {
							portrait : {
								changePoint : 480,
								visibleItems : 1
							},
							landscape : {
								changePoint : 640,
								visibleItems : 2
							},
							tablet : {
								changePoint : 768,
								visibleItems : 3
							}
						}
					});

				});
			</script>
					<script>
			var zhi;
			var lng;
      		var lat;
			var yaddress;
		function showMap(yid){
			$.ajax({
				url:"cinema/map",
				async:false,
				type:"post",
				data:{
					yid:yid
				},
				success:function(data){
					yaddress=data.yaddress;
				}
			});
			markLocation('container', yaddress);
		}
    //设置酒店的位置
			function markLocation(mapId, address) {
    	AMap.plugin('AMap.Geocoder', function() {
    		
        var geocoder = new AMap.Geocoder();            
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // 经纬度                      
                lng = result.geocodes[0].location.lng;
                lat = result.geocodes[0].location.lat;

                // 地图实例
                var map = new AMap.Map(mapId, {
                    resizeEnable: true, // 允许缩放
                    center: [lng, lat], // 设置地图的中心点
                    zoom: 15 　　　　　　 // 设置地图的缩放级别，0 - 20
                });
                        
                // 添加标记
                var marker = new AMap.Marker({
                    map: map,
                    position: new AMap.LngLat(lng, lat),   // 经纬度
                });
            marker.setMap(map);
             //鼠标点击marker弹出自定义的信息窗体
    AMap.event.addListener(marker, 'click', function () {
    			infoWindow.open(map, marker.getPosition());   
    });
		    //设置鼠标划过点标记显示的文字提示
		    marker.setTitle(yaddress);
		    marker.setLabel({
		        offset: new AMap.Pixel(10, 20),
		    });
            }
        });
    });
}

			
	</script>
			<script type="text/javascript" src="js/jquery.flexisel.js"></script>
		</div>
		<div class="container"
			style="margin: 1em; border-bottom: darkgray 1px solid;">
			<div class="col-md-2" style="margin-bottom: 1em;">
				<img src="images/pdz.jpg" width="80%" style="margin-top: 1em;" id="movieImg"/>
			</div>
			<div class="col-md-10" style="margin-top: 1em;margin-bottom: 1em;">
				<h3 style="color: red;" id="movieName">徒手攀岩</h3>
				<p style="border-bottom: darkgray 1px solid;margin-bottom: 1em;"></p>
				<p>导演：<span id="movieDir">伊丽莎白·柴·瓦萨赫伊, 金国威</span></p>
				<p>主演：<span id="movieStar">亚历克斯·霍诺尔德,汤米·考德威尔,金国威,切恩·莱姆,米基·舍费尔</span></p>
				<p>类型：<span id="movieType">纪录片</span></p>
				<p>片长：<span id="movieLen">100</span>分钟</p>
				<p>制片国家/地区：<span id="movieLoc">美国</span></p>
				<p>剧情简介：<span id="movieText">xxx</span></p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="container">
			观影时间：<span id="roundDate"></span>
			<!-- <button type="button" class="btn btn-danger">9月10日</button>
			<button type="button" class="btn btn-danger">9月11日</button> -->
		</div>
		<div style="margin: 1em;">
			<table class="table table-striped table-hover"
				style="text-align: center;vertical-align: text-bottom;">
				<thead>
					<tr>
						<th style="text-align: center;">放映时间</th>
						<th style="text-align: center;">散场时间</th>
						<th style="text-align: center;">语言版本</th>
						<th style="text-align: center;">放映厅</th>
						<th style="text-align: center;">售价（元）</th>
						<th style="text-align: center;">选座购票</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<!-- <tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>4</td>
					</tr>
					<tr>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td>8</td>
						<td>4</td>
					</tr>
					<tr>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td>8</td>
						<td>4</td>
					</tr> -->
				</tbody>
			</table>
		</div>
	</div>
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>Copyright &copy; 2015.Company name All rights reserved.</p>
		</div>
	</div>
	<!-- footer -->

</body>
</html>
